{% stylesheet %}
  .block_collection_blogs .blog_list ul {
    display: grid;
    row-gap: 40px;
    column-gap: 30px;
    grid-template-columns: repeat(2, calc(50% - 15rem));
  }

  .block_collection_blogs .blog_list_3 ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
  }

  .block_collection_blogs .blog_list_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
  }

  .block_collection_blogs .blog_list_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
  }

  .block_collection_blogs .blog_list li {
    list-style-type: none;
    overflow: hidden;
  }

  .block_collection_blogs .blog_iamge {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .block_collection_blogs .blog_iamge .block_iamge_pic {
    width: 100%;
    height: 100%;
  }

  .block_collection_blogs .blog_iamge img {
    width: 100%;
  }

  .block_collection_blogs .blog_iamge .block_iamge_name {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 24px;
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
  }

  .block_collection_blogs .blog_time {
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .block_collection_blogs .blog_name {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .block_collection_blogs .blog_descript {
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }

  .block_collection_blogs .blog_more {
    color: var(--detail_color);
    text-decoration: underline;
    transition: all 0.3s;
  }

  .block_collection_blogs .blog_more:hover {
    color: var(--title_color);
  }

  .block_collection_blogs .block_collection_blogs_more {
    text-align: center;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
  }

  .block_collection_blogs .block_collection_blogs_more a {
    margin: 0;
  }

  @media (max-width: 767px) {
    .block_collection_blogs .blog_list ul {
      display: block;
    }
    .block_collection_blogs .blog_list li {
      margin-bottom: 30px;
    }
    .block_collection_blogs .blog_list li:last-child {
      margin-bottom: 0;
    }
    .block_collection_blogs .blog_iamge {
      margin-bottom: 20px;
    }
  }
  .block_collection_blogs_more {
    text-algin: center;
  }
{% endstylesheet %}

{% assign textAlign = 'left, center, right' | split: ', ' %}
{% assign index = section.settings.text_alignment | abs %}
{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_url %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_url %}
<div class="block_collection_blogs">
  <div class="container_wrapper {% if section.settings.full_screen %}full_container_wrapper{% endif %}">
    {% include 'block_title', title: section.settings.title, detail: section.settings.detail %}
    <!-- 1fr -->
    <div class="blog_list blog_list_{{ section.settings.pc_number }}">
      <ul style=" grid-template-columns: repeat({{ section.settings.pc_number  }}, 1fr);">
        {% get_posts news_id={section.settings.collection.id} limit={section.settings.blogs_number} %}

        {% if posts.list.size %}
          {% for blog in posts.list %}
            <li style="text-align: {{ textAlign[index] }};">
              {% if section.settings.cover_picture %}
                {%- if blog.image_alt == "" -%}
                  {% assign article_alt = blog | image_alt:'blog'   %}
                {%- else -%}
                  {% assign article_alt = blog.image_alt %}
                {%- endif -%}
                <a class="blog_iamge" href="/blogs/{{ blog.handle }}">
                  <img class="lazyload" data-src="{{blog.src}}" src="{{defaultImageLoading}}" alt="{{ article_alt }}">
                </a>
              {% endif %}
              <a class="blog_name text-white-space" href="/blogs/{{ blog.handle }}">{{ blog.title }}</a>
              {% if section.settings.blog_descript %}
                <div class="blog_descript line-clamp2" style="text-align: {{ textAlign[index]  }} ;">
                  {{ blog.descript }}
                </div>
              {% endif %}
              {% if section.settings.date or section.settings.author %}
                <div class="blog_time">
                  {% if section.settings.date %}
                    <span data-date="{{blog.created_at}}" data-format="YYYY-mm-dd">
                      {{- blog.published_at | date: '%Y-%m-%d' -}}
                    </span>
                  {% endif %}
                  {% if section.settings.author %}{{ blog.author_name }}{% endif %}
                </div>
              {% endif %}
              {% if section.settings.read_now %}
                <a class="blog_more" href="/blogs/{{ blog.handle }}">{{ section.settings.read_now }}</a>
              {% endif %}
            </li>
          {% endfor %}
        {% else %}
          {% for i in (1..section.settings.pc_number) %}
            <li style="text-align: {{ textAlign[index] }} ;">
              {% if section.settings.cover_picture %}
                <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                  <img src="{{ defaultImageEmpty }}">
                </a>
              {% endif %}
              <a class="blog_name" href="javascript:;" data-tips="Please select blog"
                >the printing and typesetting industry</a
              >
              {% if section.settings.blog_descript %}
                <div class="blog_descript" style="text-align: {{ textAlign[index] }} ;">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </div>
              {% endif %}

              {% if section.settings.date or section.settings.author %}
                <div class="blog_time">
                  {% if section.settings.date %}2021-11-17{% endif %}
                  {% if section.settings.author %}author{% endif %}
                </div>
              {% endif %}
              {% if section.settings.read_now %}
                <a class="blog_more" href="javascript:;" data-tips="Please select blog">
                  {{- section.settings.read_now -}}
                </a>
              {% endif %}
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>
    {% if section.settings.more_text != '' %}
      <div class="block_collection_blogs_more">
        <a class="secondary_btn" href="news/{{ news.handle }}">{{ section.settings.more_text }}</a>
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "tag": "section",
  "class": "block_collection_blogs",
  "is_global": false,
  "name": {
    "zh_CN": "专辑博客",
    "en_US": "Collection Blogs"
  },
  "max_blocks": 0,
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_album",
      "label": {
        "zh_CN": "选择专辑",
        "en_US": "Select collection"
      },
      "default": {
        "id": "",
        "title": ""
      },
      "id": "collection"
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "placeholder": {
        "zh_CN": "请输入标题",
        "en_US": "Please enter title"
      },
      "default": "Featured Blogs"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "placeholder": {
        "zh_CN": "请输入描述",
        "en_US": "Please enter a description"
      },
      "default": ""
    },
    {
      "type": "card_switch",
      "id": "full_screen",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      }
    },
    {
      "type": "card_switch",
      "id": "date",
      "label": {
        "zh_CN": "显示日期",
        "en_US": "Show date"
      },
      "default": true
    },
    {
      "type": "card_switch",
      "id": "author",
      "label": {
        "zh_CN": "显示作者",
        "en_US": "Show author"
      },
      "default": "true"
    },
    {
      "type": "card_switch",
      "id": "cover_picture",
      "label": {
        "zh_CN": "显示封面图片",
        "en_US": "Show cover image"
      },
      "default": true
    },
    {
      "type": "card_switch",
      "id": "blog_descript",
      "label": {
        "zh_CN": "显示简短描述",
        "en_US": "Show a short description"
      }
    },
    {
      "type": "card_select",
      "id": "text_alignment",
      "label": {
        "zh_CN": "文字对齐方式",
        "en_US": "Text alignment"
      },
      "option": [
        {
          "label": {
            "zh_CN": "左对齐",
            "en_US": "Left aligned"
          },
          "value": "0"
        },
        {
          "label": {
            "zh_CN": "居中",
            "en_US": "In the center"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "右对齐",
            "en_US": "Right align"
          },
          "value": "2"
        }
      ],
      "default": "0"
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "5",
      "min": "2",
      "label": {
        "zh_CN": "每排数量",
        "en_US": "Number per row"
      },
      "info": {
        "zh_CN": "只对pc有效",
        "en_US": "PC only"
      },
      "default": "3"
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "博客总数量",
        "en_US": "Blogs number"
      },
      "max": 1000,
      "min": 1,
      "id": "blogs_number",
      "default": 3
    },
    {
      "type": "card_input",
      "id": "read_now",
      "label": {
        "zh_CN": "阅读全文文案",
        "en_US": "Read the full text"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案",
        "en_US": "Text of view more"
      },
      "id": "more_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "collection": {
        "id": "",
        "title": ""
      },
      "title": "Featured Blogs",
      "detail": "",
      "full_screen": false,
      "date": true,
      "author": true,
      "cover_picture": true,
      "blog_descript": true,
      "text_alignment": "1",
      "pc_number": "3",
      "blogs_number": "3",
      "read_now": "Read More >",
      "more_text": "View More"
    },
    "blocks": []
  },
  "icon": "icon-zhuanjiboke"
}
{% endschema %}
